<script setup>
import { onMounted, ref, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'

// 定义 props 接收外部传入的年份
const props = defineProps({
    year: {
        type: String,
        default: '2024'
    }
})

const chartRef = ref(null)
let myChart = null
let resizeObserver = null

// 不同年份的数据
const dataByYear = {
    '2024': {
        fans: [20, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        visitors: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
    },
    '2028': {
        fans: [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
        visitors: [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
    }
}

// 根据当前年份获取数据
const getCurrentData = () => {
    return dataByYear[props.year] || dataByYear['2024']
}

onMounted(() => {
    if (chartRef.value) {
        myChart = echarts.init(chartRef.value)

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                },
                backgroundColor: 'rgba(0,0,0,0.7)',
                borderColor: '#02a6b5',
                borderWidth: 1,
                textStyle: {
                    color: '#fff'
                },
                formatter: function (params) {
                    return params[0].name + '<br/>' +
                        '<span style="color:#00f2f1;">●</span> 新增粉丝: ' +
                        params[0].value +
                        '<br/>' +
                        '<span style="color:#ed3f35;">●</span> 新增游客: ' +
                        params[1].value
                }
            },
            legend: {
                data: ['新增粉丝', '新增游客'],
                textStyle: {
                    color: '#4c9bfd'
                },
                right: '8%',
                top: '0%'
            },
            grid: {
                top: '20%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: "category",
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisLabel: {
                    color: '#4c9bfb',
                    fontSize: 9
                },
            }],
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#4c9bfb'
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                }
            },
            series: [
                {
                    name: '新增粉丝',
                    data: getCurrentData().fans,
                    barWidth: 20,
                    type: 'line',
                    smooth: true,
                    showBackground: true,
                    label: {
                        show: false,
                        position: 'top',
                        color: '#fff'
                    },
                    lineStyle: {
                        color: '#00dfe3'
                    }
                },
                {
                    name: '新增游客',
                    data: getCurrentData().visitors,
                    type: 'line',
                    smooth: true,
                    label: {
                        show: false,
                        position: 'top',
                        color: '#fff'
                    },
                    lineStyle: {
                        color: '#d63c36'
                    },
                }
            ]
        }

        myChart.setOption(option)

        if (window.ResizeObserver) {
            resizeObserver = new ResizeObserver(() => {
                myChart.resize()
            })
            resizeObserver.observe(chartRef.value)
        } else {
            window.addEventListener('resize', handleResize)
        }
    }
})

// 监听 year 属性的变化，更新图表数据
watch(() => props.year, (newYear) => {
    if (myChart) {
        const currentData = getCurrentData()
        myChart.setOption({
            series: [
                {
                    data: currentData.fans
                },
                {
                    data: currentData.visitors
                }
            ]
        })
    }
})

// 处理窗口大小变化
const handleResize = () => {
    if (myChart) {
        myChart.resize({
            animation: {
                duration: 300
            }
        })
    }
}

// 组件卸载时清理事件监听器
onUnmounted(() => {
    if (resizeObserver && chartRef.value) {
        resizeObserver.unobserve(chartRef.value)
        resizeObserver = null
    }

    window.removeEventListener('resize', handleResize)

    if (myChart) {
        myChart.dispose()
    }
})
</script>

<template>
    <div ref="chartRef" style="width: 100%; height: 240px;"></div>
</template>

<style lang="scss" scoped></style>